<template>
  <div class="p-select">
    <div class="p-select-label">
      {{ label + '：' }}
    </div>
    <a-select class="p-select-input" allowClear @change="change" :placeholder="'请选择' + label" v-model="myValue">
      <a-select-option v-for="item in options" :key="item.value">
        {{ item.label }}
      </a-select-option>
    </a-select>
  </div>
</template>

<script>
export default {
  props: {
    // 标题
    label: {
      type: String,
      require: true
    },
    // 数据源
    options: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 下标
    index: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      myValue: undefined // 输入框绑定值
    }
  },
  mounted() {},
  methods: {
    // 级联change事件
    change(e) {
      this.$emit('change', e, this.index)
    },
    // 重置内容
    reset() {
      this.myValue = undefined
      this.$emit('change', '', this.index)
    }
  }
}
</script>

<style lang="less" scoped>
.p-select {
  display: flex;
  align-items: center;
}

.p-select-label {
  text-align: right;
  font-size: 1rem;
  color: #333333;
  background: #ffffff;
  padding: 0 11px;
}

.p-select-input {
  flex: 1 1;
}

/deep/.ant-select-selection {
  border-radius: 4px;
}
</style>
